<template>
  <div class="welcome-content">
    <div class="guide-icon">
      <svg viewBox="0 0 24 24" width="48" height="48">
        <path fill="#4e6ef2" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
      </svg>
    </div>
    <h2 class="guide-title">欢迎使用 AI 智能搜索</h2>
    <div class="guide-suggestions">
      <p class="guide-text">您可以尝试搜索：</p>
      <div class="suggestion-tags">
        <div 
          v-for="(tag, index) in displayedTags" 
          :key="index"
          class="search-tag suggestion"
          :class="{ 'offset': index % 2 === 1 }"
          @click="$emit('suggestion-click', tag)">
          {{ tag }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const SUGGESTION_TAGS = [
  '2025年 AI 发展趋势',
  '人工智能最新突破',
  '机器学习应用案例',
  'AI 助手对比评测',
  '自然语言处理技术',
  'AI 在医疗领域应用',
  'ChatGPT 发展历程',
  '深度学习框架对比',
  'AI 大模型最新进展',
  'AI 辅助编程工具',
  'AI 图像生成技术',
  '量子计算与 AI',
  'AI 安全与伦理',
  'AI 教育应用实践',
  'AI 投资机会分析'
];

const getRandomSuggestions = (count = 5) => {
  const shuffled = [...SUGGESTION_TAGS].sort(() => 0.5 - Math.random());
  return shuffled.slice(0, count);
};

const displayedTags = ref([]);

onMounted(() => {
  displayedTags.value = getRandomSuggestions();
});

defineProps({
  suggestionTags: {
    type: Array,
    default: () => []
  }
});

defineEmits(['suggestion-click']);
</script>

<style scoped>
.welcome-content {
  text-align: center;
  padding: 60px 24px;
  width: 100%;
  background: transparent;
}

.guide-icon {
  margin-bottom: 32px;
}

.guide-icon svg {
  opacity: 0.9;
}

.guide-title {
  font-size: 28px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 40px;
}

.guide-suggestions {
  width: 100%;
}

.guide-text {
  font-size: 16px;
  color: #4e5969;
  margin: 0 0 24px;
}

.suggestion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  justify-content: center;
  align-items: flex-start;
  padding: 0 20px;
}

.search-tag.suggestion {
  background: #f8f9fa;
  border: 1px solid #eaecef;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 6px;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: auto;
  max-width: none;
  height: 32px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex: 0 0 auto;
}

.search-tag.suggestion.offset {
  margin-top: 8px;
}

.search-tag.suggestion:hover {
  background: #f0f2f5;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.search-tag.suggestion::before {
  content: "🔍";
  font-size: 12px;
  opacity: 0.7;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .welcome-content {
    padding: 40px 16px;
  }

  .guide-title {
    font-size: 24px;
    margin-bottom: 32px;
  }

  .guide-text {
    font-size: 15px;
    margin-bottom: 20px;
  }

  .suggestion-tags {
    gap: 8px;
    padding: 0 12px;
  }

  .search-tag.suggestion {
    height: 30px;
    font-size: 13px;
    padding: 6px 12px;
  }

  .search-tag.suggestion.offset {
    margin-top: 6px;
  }
}
</style> 